//获取本地存储localStorage中的index中的信息
let str_index = localStorage.getItem("index");
let arr_index = JSON.parse( str_index );
console.log( arr_index );

//获取本地存储localStorage中的buy中的信息
let str_buy = localStorage.getItem( "buy" );
let arr_buy = JSON.parse( str_buy );
console.log( arr_buy );

//将.content-box的内容清空
document.querySelectorAll(".content-box")[0].innerHTML = "";
console.log( arr_buy.arr1 );

//将满足条件的数组刷新到页面
for( let i = 0;i < arr_buy.arr1.length;i++ ){
    arr_index.forEach((item,index) => {
        console.log( item );
        // 判断
        if( arr_buy.arr1[i] === item.id ){
            //创建模板字符串
            str = `<div>
            <input type="checkbox">
            <a href="">
                <img src=${item.pro_imgpath} alt="">
                <div>
                    <p>${item.pro_name}</p>
                    <p>颜色：白色</p>
                    <p>尺码：${item.pro_size}</p>
                </div>
                <span>${item.pro_price}</span>
            </a>
        </div>`;
        document.querySelectorAll(".content-box")[0].innerHTML += str;
        }
    });
}

//放入总价的标签
let o_span = document.createElement("span");
o_span.innerText = "0";
document.querySelectorAll(".content-box")[0].append(o_span);

let inputs = document.querySelectorAll(".content-box>div>input");
let total = 0;
for( let i = 0;i < inputs.length;i++ ){
    inputs[i].onclick = function(){
        let price = +inputs[i].parentNode.children[1].children[2].innerText;
       if( inputs[i].checked ){
             //获取商品的价格
            console.log( price );
            total += price;
            o_span.innerText = total;
       }else{
           o_span.innerText = +o_span.innerText - price;
       }
    }
}
